<template>
  <div class="consumer-page activity-list-page">
    <!--头部标题-->
    <el-breadcrumb separator="/" class="page-title">
      <el-breadcrumb-item>Verification</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="verify-title">Tolymoly</div>
    <div class="status-area">
      <div :class="['box1',{turnRed:pendingStatus}]" @click="toVerify(1)">
        <span :class="['number-wraper',{turnWhite:pendingStatus}]">{{pendingCount}}</span>
      </div>
      <div :class="['box2',{turnRed:notSurePendingStatus}]" @click="toVerify(2)"><span
        :class="['number-wraper',{turnWhite:notSurePendingStatus}]">{{notSurePendingCount}}</span>
      </div>
    </div>
    <div class="status-area">
      <div :class="['box3',{turnRed:reportedStatus}]" @click="toVerify(3)"><span
        :class="['number-wraper',{turnWhite:reportedStatus}]">{{reportedCount}}</span>
      </div>
      <div :class="['box4',{turnRed:notSureReportedStatus}]" @click="toVerify(4)"><span
        :class="['number-wraper',{turnWhite:notSureReportedStatus}]">{{notSureReportedCount}}</span>
      </div>
    </div>
    <div class="seprate-line"></div>
    <div class="verify-title">Best property</div>
    <div class="status-area">
      <div :class="['box1',{turnRed:propertyPendingStatus}]" @click="toVerify(5)">
        <span :class="['number-wraper',{turnWhite:propertyPendingStatus}]">{{propertyPendingCount}}</span>
      </div>
      <div :class="['box2',{turnRed:propertyNotSurePendingStatus}]" @click="toVerify(6)"><span
        :class="['number-wraper',{turnWhite:propertyNotSurePendingStatus}]">{{propertyNotSurePendingCount}}</span>
      </div>
    </div>
    <div class="status-area">
      <div :class="['box3',{turnRed:propertyReportedStatus}]" @click="toVerify(7)"><span
        :class="['number-wraper',{turnWhite:propertyReportedStatus}]">{{propertyReportedCount}}</span>
      </div>
      <div :class="['box4',{turnRed:propertyNotSureReportedStatus}]" @click="toVerify(8)"><span
        :class="['number-wraper',{turnWhite:propertyNotSureReportedStatus}]">{{propertyNotSureReportedCount}}</span>
      </div>
    </div>
    <p style="marginTop:50px">Last updated: <span>{{time}}</span></p>
    <el-table
      :data="explainTable"
      v-loading="tableLoading"
      border
      style="width: 100%">
      <!--Software design-->
      <el-table-column
        prop="design"
        label="Software design"
        align="center"
        min-width="120"
      >
      </el-table-column>
      <!--Reason-->
      <el-table-column
        prop="reason"
        label="Reason"
        align="center"
        min-width="120"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getVerifyStatusInfo, getPropertyVerifyInfo} from '../../api/guc_api.js';

  export default {
    name: 'verificationIndex',
    data() {
      return {
        explainTable: [
          {
            design: 'verify every new ad, and reported ad',
            reason: 'to prevent illegal ad',
          },
          {
            design: 'every ad will only be verified by 1 person at any time',
            reason: 'to prevent duplicate',
          },
          {
            design: 'the verification time is 10 minutes, after that anyone can verify',
            reason: 'to prevent forget',
          },
          {
            design: 'if the ad follows our rules , click \<approve\>',
            reason: 'ad status will change from \<pending\> to \<active\>',
          },
          {
            design: 'if you are not sure, click \<not sure\>',
            reason: 'higher level to decide',
          },
        ],
        tableLoading: false,
        pendingCount: '0',
        notSurePendingCount: '0',
        reportedCount: '0',
        notSureReportedCount: '0',
        propertyPendingCount: '0',
        propertyNotSurePendingCount: '0',
        propertyReportedCount: '0',
        propertyNotSureReportedCount: '0',
        time: '',
      }
    },
    computed: {
      pendingStatus() {
        if (this.pendingCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      notSurePendingStatus() {
        if (this.notSurePendingCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      reportedStatus() {
        if (this.reportedCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      notSureReportedStatus() {
        if (this.notSureReportedCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      propertyPendingStatus() {
        if (this.propertyPendingCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      propertyNotSurePendingStatus() {
        if (this.propertyNotSurePendingCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      propertyReportedStatus() {
        if (this.propertyReportedCount > 0) {
          return true
        }
        else {
          return false
        }
      },
      propertyNotSureReportedStatus() {
        if (this.propertyNotSureReportedCount > 0) {
          return true
        }
        else {
          return false
        }
      },
    },
    methods: {
      //错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      //成功消息提示
      messageToastSuccess(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'success'
        })
      },
      //日期格式化
      dateFormat(value) {
        let date = new Date(value);
        let Y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let H = date.getHours();
        let i = date.getMinutes();
        let s = date.getSeconds();
        if (m < 10) {
          m = '0' + m;
        }
        if (d < 10) {
          d = '0' + d;
        }
        if (H < 10) {
          H = '0' + H;
        }
        if (i < 10) {
          i = '0' + i;
        }
        if (s < 10) {
          s = '0' + s;
        }
        let t = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s;
        return t;
      },
      toVerify(num) {
        switch (num) {
          case 1 :
            if (this.pendingCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verify',
                query: {
                  status: '7',
                  verificationStatus: '0'
                }
              })
            }
            break;
          case 2 :
            if (this.notSurePendingCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verify',
                query: {
                  status: '7',
                  verificationStatus: '2'
                }
              })
            }
            break;
          case 3 :
            if (this.reportedCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verify',
                query: {
                  status: '8',
                  verificationStatus: '0',
                }
              })
            }
            break;
          case 4 :
            if (this.notSureReportedCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verify',
                query: {
                  status: '8',
                  verificationStatus: '2'
                }
              })
            }
            break;
          case 5 :
            if (this.propertyPendingCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verifyProperty',
                query: {
                  status: '7',
                  verificationStatus: '0'
                }
              })
            }
            break;
          case 6 :
            if (this.propertyNotSurePendingCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verifyProperty',
                query: {
                  status: '7',
                  verificationStatus: '2'
                }
              })
            }
            break;
          case 7 :
            if (this.propertyReportedCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verifyProperty',
                query: {
                  status: '8',
                  verificationStatus: '0',
                }
              })
            }
            break;
          case 8 :
            if (this.propertyNotSureReportedCount <= 0) {
              return false
            }
            else {
              this.$router.push({
                path: 'verifyProperty',
                query: {
                  status: '8',
                  verificationStatus: '2'
                }
              })
            }
            break;
          default:
            break;
        }
      }
      ,
      //获取数据
      getData() {
        window.getListInterval = window.setInterval(() => {
          getVerifyStatusInfo()
            .then(res => {
              if (res.data.errorID === 0) {
                this.pendingCount = res.data.object.pendingCount
                this.notSurePendingCount = res.data.object.notSurePendingCount
                this.reportedCount = res.data.object.reportedCount
                this.notSureReportedCount = res.data.object.notSureReportedCount
                let date = new Date()
                this.time = this.dateFormat(date)
              }
              else {
                this.messageToastErr(res.data.message)
              }
            })
            .catch((err) => {
              window.clearInterval(window.getListInterval)
              console.log(err)
            })
          getPropertyVerifyInfo()
            .then(res => {
              if (res.data.errorID == 0) {
                let data = res.data.object
                this.propertyPendingCount = data.pendingCount
                this.propertyNotSurePendingCount = data.notSurePendingCount
                //举报暂时还没有数据 先不赋值
                this.propertyReportedCount
                this.propertyNotSureReportedCount
              }
              else {
                this.messageToastErr(res.data.message)
              }
            })
            .catch((err) => {
              window.clearInterval(window.getListInterval)
              console.log(err)
            })
        }, 5000)
      }
      ,
    },
    mounted() {
      getVerifyStatusInfo()
        .then(res => {
          if (res.data.errorID === 0) {
            this.pendingCount = res.data.object.pendingCount
            this.notSurePendingCount = res.data.object.notSurePendingCount
            this.reportedCount = res.data.object.reportedCount
            this.notSureReportedCount = res.data.object.notSureReportedCount
            let date = new Date()
            this.time = this.dateFormat(date)
          }
          else {
            this.messageToastErr(res.data.message)
          }
        }).catch((e) => {
        this.messageToastErr('Error,please reload this page.')
      })
      getPropertyVerifyInfo()
        .then(res => {
          if (res.data.errorID == 0) {
            let data = res.data.object
            this.propertyPendingCount = data.pendingCount
            this.propertyNotSurePendingCount = data.notSurePendingCount
            //举报暂时还没有数据 先不赋值
            this.propertyReportedCount
            this.propertyNotSureReportedCount
          }
          else {
            this.messageToastErr(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.getData();
    },
    beforeRouteLeave(to, from, next) {
      window.clearInterval(window.getListInterval)
      next();
    }
  };
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .photos-box .color-box img {
    width: 100%;
    height: 100%;
  }

  .photos-box .color-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  .photos-box .color-box:hover a {
    display: block;
  }

  .status-area {
    width: 100%;
    display: flex;
    justify-content: left;
  }

  /*下面是动态绑定的样式 变黑了但是也都是有用的*/
  .box1, .box2, .box3, .box4 {
    width: 100px;
    height: 100px;
    border: solid 1px black;
    display: inline-block;
    position: relative;
    margin: 44px 100px 0 100px;
    cursor: not-allowed;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .box1:before, .box2:before, .box3:before, .box4:before {
    content: '';
    font-size: 20px;
    position: absolute;
    width: 200px;
    left: -10px;
    top: -45px;
    padding: 10px;
  }

  .box1:before {
    content: 'New Ad'
  }

  .box2:before {
    content: 'New Ad(not sure)'
  }

  .box3:before {
    content: 'Reported Ad'
  }

  .box4:before {
    content: 'Reported Ad(not sure)'
  }

  .number-wraper {
    font-size: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .turnRed {
    background: #EB4826;
    cursor: pointer !important;
  }

  .turnWhite {
    color: rgb(255, 255, 255)
  }

  .verify-title {
    font-weight: 600;
    font-size: 20px;
    margin: 10px;
  }

  .seprate-line {
    width: 70%;
    border: 2px solid #666666;
    margin: 20px;
  }
</style>
